<html>
<style>
    *{
        margin: 0;
        padding:0;
    }
    .nav {
      margin-left: 25px;
      height: 52px;
      width: 100%;
      background-color: #fff;
    }
    a {
      color: inherit;
      text-decoration: none;
    }
    li {
      list-style: none;
      display: inline-block;
      position: relative;
      background-color: #8590a6;
      opacity: 0.5;
    } 
   .nav ul li a {
      padding: 0 14px;
      height: 52px;
      color:black;
      cursor: pointer;
      line-height: 52px;
    }
    li::before {
    content: "";
    position: absolute;
    top: 0;
    left: 100%;
    width: 0;
    height: 100%;
    border-bottom: 2px solid #000;
    transition: 0.2s all linear;
}

li:hover::before{
    left: 0;
    width: 100%;
}
  li:hover ~ li::before 
  {
    left: 0;
}
</style>
    <div class="nav">
        <ul>
          <li><a>首页</a></li>
          <li><a>会员</a></li>
          <li><a>发现</a></li>
          <li><a>等你来答</a></li>
        </ul>
      </div>
</html>
